<template>
  <view class="favorites-page">
    <!-- 顶部导航栏 -->
    <view class="page-header">
      <view class="header-top">
        <view class="back-btn" @click="handleBack">
          <FaIcon name="arrow-left" color="#1f2937" :size="36" />
        </view>
        <text class="header-title">我的收藏</text>
        <view class="placeholder"></view>
      </view>
      
      <!-- Tab切换 -->
      <view class="tab-bar">
        <view 
          :class="['tab-item', { active: currentTab === 'services' }]"
          @click="currentTab = 'services'"
        >
          <text :class="['tab-text', { active: currentTab === 'services' }]">服务收藏</text>
        </view>
        <view 
          :class="['tab-item', { active: currentTab === 'demands' }]"
          @click="currentTab = 'demands'"
        >
          <text :class="['tab-text', { active: currentTab === 'demands' }]">需求收藏</text>
        </view>
      </view>
    </view>

    <!-- 服务收藏列表 -->
    <scroll-view v-if="currentTab === 'services'" scroll-y class="content-scroll">
      <view class="list-container">
        <ServiceCard 
          v-for="item in favoriteServices" 
          :key="item.id"
          :service="item"
          @click="handleViewDetail(item, 'service')"
        />
        
        <!-- 空状态 -->
        <view v-if="favoriteServices.length === 0" class="empty-state">
          <FaIcon name="star-o" color="#d1d5db" :size="160" />
          <text class="empty-text">暂无收藏的服务</text>
          <button class="browse-btn" @click="handleBrowseServices">
            <FaIcon name="search" color="#ffffff" :size="24" style="margin-right: 12rpx;" />
            <text class="btn-text">去看看</text>
          </button>
        </view>
      </view>
      
      <!-- 底部安全区 -->
      <view class="safe-bottom"></view>
    </scroll-view>

    <!-- 需求收藏列表 -->
    <scroll-view v-if="currentTab === 'demands'" scroll-y class="content-scroll">
      <view class="list-container">
        <DemandCard 
          v-for="item in favoriteDemands" 
          :key="item.id"
          :demand="item"
          @click="handleViewDetail(item, 'demand')"
        />
        
        <!-- 空状态 -->
        <view v-if="favoriteDemands.length === 0" class="empty-state">
          <FaIcon name="star-o" color="#d1d5db" :size="160" />
          <text class="empty-text">暂无收藏的需求</text>
          <button class="browse-btn" @click="handleBrowseDemands">
            <FaIcon name="search" color="#ffffff" :size="24" style="margin-right: 12rpx;" />
            <text class="btn-text">去看看</text>
          </button>
        </view>
      </view>
      
      <!-- 底部安全区 -->
      <view class="safe-bottom"></view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import FaIcon from '@/components/common/FaIcon.vue'
import ServiceCard from '@/components/yjyny/ServiceCard.vue'
import DemandCard from '@/components/yjyny/DemandCard.vue'

// 当前Tab
const currentTab = ref('services')

// 收藏的服务
const favoriteServices = ref([
  {
    id: 1,
    title: '提供专业拖拉机耕地服务',
    content: '拥有大型拖拉机，提供专业的耕地、翻地服务，经验丰富，价格实惠。',
    category: '农机服务',
    price: 200,
    unit: '亩',
    rating: 4.8,
    orders: 156,
    provider: {
      name: '张师傅',
      avatar: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=100&h=100&fit=crop'
    }
  },
  {
    id: 2,
    title: '专业农业技术咨询指导',
    content: '10年农业种植经验，提供种植技术、病虫害防治等全方位咨询服务。',
    category: '技术支持',
    price: 300,
    unit: '次',
    rating: 4.9,
    orders: 203,
    provider: {
      name: '李专家',
      avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop'
    }
  }
])

// 收藏的需求
const favoriteDemands = ref([
  {
    id: 1,
    title: '急需50亩水稻收割服务',
    content: '我家有50亩水稻即将成熟，需要专业的收割机和操作人员，要求经验丰富，服务质量好。',
    category: '农机服务',
    status: '进行中',
    budget: 5000,
    time: '2024-10-15',
    views: '128',
    topBarColor: 'primary'
  }
])

// 事件处理
const handleBack = () => {
  uni.navigateBack()
}

const handleViewDetail = (item, type) => {
  const url = type === 'demand' 
    ? `/pages/yjyny/demand/detail?id=${item.id}`
    : `/pages/yjyny/service/detail?id=${item.id}`
  uni.navigateTo({ url })
}

const handleBrowseServices = () => {
  uni.reLaunch({ url: '/pages/yjyny/service/list' })
}

const handleBrowseDemands = () => {
  uni.reLaunch({ url: '/pages/yjyny/demand/list' })
}
</script>

<style lang="scss" scoped>
.favorites-page {
  min-height: 100vh;
  background-color: #f9fafb;
}

// 顶部导航栏
.page-header {
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12rpx);
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 2rpx solid #f3f4f6;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}

.header-top {
  display: flex;
  align-items: center;
  padding: 24rpx 32rpx;
  gap: 24rpx;
}

.back-btn {
  width: 64rpx;
  height: 64rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
}

.back-btn:active {
  background-color: #f3f4f6;
}

.header-title {
  flex: 1;
  font-size: 32rpx;
  font-weight: bold;
  color: #1f2937;
  text-align: center;
}

.placeholder {
  width: 64rpx;
}

// Tab栏
.tab-bar {
  display: flex;
  border-bottom: 2rpx solid #f3f4f6;
}

.tab-item {
  flex: 1;
  padding: 24rpx 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  
  &.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60rpx;
    height: 4rpx;
    background-color: #10b981;
    border-radius: 2rpx;
  }
}

.tab-text {
  font-size: 28rpx;
  color: #6b7280;
  font-weight: 500;
  transition: color 0.3s;
  
  &.active {
    color: #10b981;
    font-weight: bold;
  }
}

// 内容滚动区
.content-scroll {
  height: calc(100vh - 200rpx);
}

.list-container {
  padding: 32rpx;
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

// 空状态
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 0;
}

.empty-text {
  margin-top: 32rpx;
  margin-bottom: 48rpx;
  font-size: 28rpx;
  color: #9ca3af;
}

.browse-btn {
  display: flex;
  align-items: center;
  padding: 24rpx 48rpx;
  background: linear-gradient(135deg, #10b981, #059669);
  border: none;
  border-radius: 48rpx;
  box-shadow: 0 8rpx 24rpx rgba(16, 185, 129, 0.3);
}

.btn-text {
  font-size: 28rpx;
  font-weight: 500;
  color: #ffffff;
}

// 底部安全区
.safe-bottom {
  height: 160rpx;
}
</style>
